<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI学术润色系统</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            color: white;
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }

        .main-content {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .input-section {
            margin-bottom: 30px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
            color: #555;
        }

        textarea {
            width: 100%;
            min-height: 120px;
            padding: 15px;
            border: 2px solid #e1e5e9;
            border-radius: 10px;
            font-size: 16px;
            font-family: inherit;
            resize: vertical;
            transition: border-color 0.3s;
        }

        textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .style-selector {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .style-option {
            background: #f8f9fa;
            border: 2px solid #e1e5e9;
            border-radius: 10px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }

        .style-option:hover {
            border-color: #667eea;
            background: #f0f2ff;
        }

        .style-option.active {
            border-color: #667eea;
            background: #667eea;
            color: white;
        }

        .style-option h3 {
            margin-bottom: 5px;
            font-size: 1.1rem;
        }

        .style-option p {
            font-size: 0.9rem;
            opacity: 0.8;
        }

        .button-group {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            padding: 15px 30px;
            font-size: 16px;
            font-weight: 600;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
            min-width: 150px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background: #5a6268;
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }

        .loading {
            display: none;
            text-align: center;
            padding: 20px;
            color: #667eea;
        }

        .loading.show {
            display: block;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .reasoning-section {
            margin-top: 20px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
            border-left: 4px solid #28a745;
        }

        .demo-warning {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            color: #856404;
        }

        .demo-warning h4 {
            margin: 0 0 8px 0;
            color: #d68910;
        }
        
        .reasoning-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .reasoning-header h3 {
            margin: 0;
            color: #28a745;
        }

        .toggle-reasoning {
            background: #28a745;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }

        .reasoning-content {
            background: white;
            padding: 15px;
            border-radius: 8px;
            white-space: pre-wrap;
            line-height: 1.6;
            font-family: monospace;
            font-size: 14px;
            max-height: 300px;
            overflow-y: auto;
            display: none;
        }

        .reasoning-content.show {
            display: block;
        }

        .result-section {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
            display: none;
        }

        .result-section.show {
            display: block;
        }

        .result-header {
            display: flex;
            justify-content: between;
            align-items: center;
            margin-bottom: 15px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .result-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: #333;
        }

        .result-meta {
            display: flex;
            gap: 15px;
            font-size: 0.9rem;
            color: #666;
            flex-wrap: wrap;
        }

        .result-content {
            background: white;
            padding: 20px;
            border-radius: 10px;
            border-left: 4px solid #667eea;
            margin-bottom: 15px;
        }

        .result-text {
            line-height: 1.8;
            font-size: 16px;
        }

        .copy-btn {
            background: #28a745;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }

        .copy-btn:hover {
            background: #218838;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .stat-item {
            background: white;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            border: 1px solid #e1e5e9;
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: 600;
            color: #667eea;
        }

        .stat-label {
            font-size: 0.9rem;
            color: #666;
        }

        .error {
            background: #f8d7da;
            color: #721c24;
            padding: 15px;
            border-radius: 10px;
            margin: 15px 0;
            border: 1px solid #f5c6cb;
        }

        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            .main-content {
                padding: 20px;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .button-group {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>AI学术润色系统</h1>
            <p>基于DeepSeek-R1的专业文本润色服务</p>
        </div>

        <div class="main-content">
            <div class="input-section">
                <div class="form-group">
                    <label for="textInput">📝 请输入需要润色的文本</label>
                    <textarea 
                        id="textInput" 
                        placeholder="在这里粘贴您的文本内容...&#10;&#10;例如：&#10;• 学术论文段落&#10;• 研究报告内容&#10;• 正式文档文本&#10;• 任何需要专业润色的内容"
                        maxlength="10000"
                    ></textarea>
                    <small style="color: #666;">支持1-10000字符</small>
                </div>

                <div class="form-group">
                    <label>🎨 选择润色风格</label>
                    <div class="style-selector">
                        <div class="style-option active" data-style="academic">
                            <h3>📚 学术论文</h3>
                            <p>提高专业性和严谨性</p>
                        </div>
                        <div class="style-option" data-style="formal">
                            <h3>📋 正式文体</h3>
                            <p>庄重得体的语言风格</p>
                        </div>
                        <div class="style-option" data-style="casual">
                            <h3>💬 通俗易懂</h3>
                            <p>简洁明了的表达方式</p>
                        </div>
                        <div class="style-option" data-style="creative">
                            <h3>✨ 创意表达</h3>
                            <p>新颖有趣的表达方式</p>
                        </div>
                    </div>
                </div>

                <div class="button-group">
                    <button class="btn btn-primary" id="processBtn">
                        🚀 开始润色
                    </button>
                    <button class="btn btn-secondary" id="detectBtn">
                        🔍 AI检测
                    </button>
                    <button class="btn btn-secondary" id="clearBtn">
                        🗑️ 清空内容
                    </button>
                </div>
            </div>

            <div class="loading" id="loading">
                <div class="spinner"></div>
                <p><strong>🧠 DeepSeek-R1 正在深度思考中...</strong></p>
                <p>请耐心等待 10-20 秒，AI正在进行深度推理和润色</p>
            </div>

            <div class="result-section" id="resultSection">
                <div class="result-header">
                    <div class="result-title">✨ 润色结果</div>
                    <button class="copy-btn" id="copyBtn">📋 复制结果</button>
                </div>
                
                <div class="result-content">
                    <div class="result-text" id="resultText"></div>
                </div>

                <!-- 在 result-content div 后面添加 -->
                <div class="reasoning-section" id="reasoningSection" style="display: none;">
                    <div class="reasoning-header">
                        <h3>🧠 AI思考过程</h3>
                        <button class="toggle-reasoning" id="toggleReasoning">展开思考过程</button>
                    </div>
                    <div class="reasoning-content" id="reasoningContent"></div>
                </div>

                <div class="stats">
                    <div class="stat-item">
                        <div class="stat-value" id="aiProbability">-</div>
                        <div class="stat-label">AI检测概率</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="processingTime">-</div>
                        <div class="stat-label">处理时间(秒)</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="styleUsed">-</div>
                        <div class="stat-label">使用风格</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="apiUsed">-</div>
                        <div class="stat-label">AI服务</div>
                    </div>
                </div>
            </div>
        </div>

        <div style="text-align: center; color: white; opacity: 0.8; margin-top: 30px;">
            <p>Powered by 🔥 火山引擎 DeepSeek-R1 | 🚀 FastAPI | ❤️ 开源项目</p>
        </div>
    </div>

    <script>
        // 配置API地址 - GitHub Pages部署时需要修改为实际后端地址
        const API_BASE_URL = 'http://127.0.0.1:8000';  // 匹配您访问的地址
        
        // DOM元素
        const textInput = document.getElementById('textInput');
        const processBtn = document.getElementById('processBtn');
        const detectBtn = document.getElementById('detectBtn');
        const clearBtn = document.getElementById('clearBtn');
        const loading = document.getElementById('loading');
        const resultSection = document.getElementById('resultSection');
        const resultText = document.getElementById('resultText');
        const copyBtn = document.getElementById('copyBtn');
        const styleOptions = document.querySelectorAll('.style-option');
        
        let selectedStyle = 'academic';
        
        // 风格选择
        styleOptions.forEach(option => {
            option.addEventListener('click', () => {
                styleOptions.forEach(opt => opt.classList.remove('active'));
                option.classList.add('active');
                selectedStyle = option.dataset.style;
            });
        });
        
        // 处理文本
        processBtn.addEventListener('click', async () => {
            const content = textInput.value.trim();
            
            if (!content) {
                alert('请输入要处理的文本内容');
                return;
            }
            
            if (content.length > 10000) {
                alert('文本长度不能超过10000字符');
                return;
            }
            
            try {
                showLoading(true);
                hideError();
                
                const response = await fetch(`${API_BASE_URL}/api/v1/process`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        content: content,
                        style: selectedStyle
                    })
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                
                const result = await response.json();
                showResult(result);
                
            } catch (error) {
                console.error('Error:', error);
                showError(`处理失败: ${error.message}. 请检查后端服务是否正常运行。`);
            } finally {
                showLoading(false);
            }
        });
        
        // AI检测
        detectBtn.addEventListener('click', async () => {
            const content = textInput.value.trim();
            
            if (!content) {
                alert('请输入要检测的文本内容');
                return;
            }
            
            try {
                showLoading(true);
                hideError();
                
                const response = await fetch(`${API_BASE_URL}/api/v1/detect`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        content: content
                    })
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                
                const result = await response.json();
                showDetectionResult(result);
                
            } catch (error) {
                console.error('Error:', error);
                showError(`检测失败: ${error.message}`);
            } finally {
                showLoading(false);
            }
        });
        
        // 清空内容
        clearBtn.addEventListener('click', () => {
            textInput.value = '';
            resultSection.classList.remove('show');
            hideError();
        });
        
        // 复制结果
        copyBtn.addEventListener('click', () => {
            const text = resultText.textContent;
            navigator.clipboard.writeText(text).then(() => {
                copyBtn.textContent = '✅ 已复制';
                setTimeout(() => {
                    copyBtn.textContent = '📋 复制结果';
                }, 2000);
            });
        });
        
        // 显示加载状态
        function showLoading(show) {
            if (show) {
                loading.classList.add('show');
                processBtn.disabled = true;
                detectBtn.disabled = true;
                resultSection.classList.remove('show');
            } else {
                loading.classList.remove('show');
                processBtn.disabled = false;
                detectBtn.disabled = false;
            }
        }
                
        // 显示结果
        function showResult(result) {
            console.log('收到结果:', result); // 调试日志
            // resultText.textContent = result.processed_text || '处理结果为空';
            resultText.innerHTML = marked.parse(result.processed_text || '处理结果为空');
            
            // 安全地获取数据，提供默认值
            const aiProbability = result.ai_probability !== undefined ? 
                (result.ai_probability * 100).toFixed(1) + '%' : '未知';
            const processingTime = result.processing_time !== undefined ? 
                result.processing_time.toFixed(1) + 's' : '未知';
            const styleUsed = result.style_used || selectedStyle || '未知';
            const apiUsed = result.api_used || '未知';
            
            document.getElementById('aiProbability').textContent = aiProbability;
            document.getElementById('processingTime').textContent = processingTime;
            document.getElementById('styleUsed').textContent = styleUsed;
            document.getElementById('apiUsed').textContent = apiUsed;
            
            // 显示思考过程（如果有）
            const reasoningContent = result.reasoning_content || result.reasoning || '';
            if (reasoningContent) {
                const reasoningSection = document.getElementById('reasoningSection');
                if (reasoningSection) {
                    document.getElementById('reasoningContent').innerHTML = marked.parse(reasoningContent);
                    reasoningSection.style.display = 'block';
                }
            } else {
                const reasoningSection = document.getElementById('reasoningSection');
                if (reasoningSection) {
                    reasoningSection.style.display = 'none';
                    document.getElementById('reasoningContent').innerHTML = '';
                }
            }
            

            // 检测是否为演示模式
            if (result.api_used && result.api_used.includes('演示模式')) {
                // 显示演示模式警告
                const warning = document.createElement('div');
                warning.className = 'demo-warning';
                warning.innerHTML = `
                    <h4>⚠️ 演示模式</h4>
                    <p>当前运行在演示模式下，结果为模拟数据。要使用真实的DeepSeek-R1 API，请配置API密钥。</p>
                `;
                resultSection.insertBefore(warning, resultSection.firstChild);
            }
            
            resultSection.classList.add('show');
        }

        // 添加思考过程切换功能
        document.getElementById('toggleReasoning').addEventListener('click', () => {
            const content = document.getElementById('reasoningContent');
            const button = document.getElementById('toggleReasoning');
            console.log('toggleReasoning clicked');
            console.log('content:', content);
            console.log('button:', button);
            console.log('content.classList:', content.classList);
            if (content.classList.contains('show')) {
                content.classList.remove('show');
                button.textContent = '展开思考过程';
                console.log('收起思考过程');
            } else {
                content.classList.add('show');
                button.textContent = '收起思考过程';
                console.log('展开思考过程');
            }
        });
                
        // 显示检测结果
        function showDetectionResult(result) {
            resultText.textContent = `AI检测结果：\n\n检测概率: ${(result.ai_probability * 100).toFixed(1)}%\n置信度: ${result.confidence_level}\n\n详细分析：\n• 模式得分: ${(result.analysis.pattern_score * 100).toFixed(1)}%\n• 复杂度得分: ${(result.analysis.complexity_score * 100).toFixed(1)}%\n• 语义得分: ${(result.analysis.semantic_score * 100).toFixed(1)}%`;
            
            document.getElementById('aiProbability').textContent = (result.ai_probability * 100).toFixed(1) + '%';
            document.getElementById('processingTime').textContent = result.processing_time.toFixed(1) + 's';
            document.getElementById('styleUsed').textContent = 'AI检测';
            document.getElementById('apiUsed').textContent = 'DeepSeek-R1';
            
            resultSection.classList.add('show');
        }
        
        // 显示错误
        function showError(message) {
            const existingError = document.querySelector('.error');
            if (existingError) {
                existingError.remove();
            }
            
            const errorDiv = document.createElement('div');
            errorDiv.className = 'error';
            errorDiv.textContent = message;
            
            loading.parentNode.insertBefore(errorDiv, loading);
        }
        
        // 隐藏错误
        function hideError() {
            const existingError = document.querySelector('.error');
            if (existingError) {
                existingError.remove();
            }
        }
        
    // 字符计数
    textInput.addEventListener('input', () => {
        const length = textInput.value.length;
        const counter = document.querySelector('small');
        if (counter) {
            counter.textContent = `${length}/10000 字符`;
            if (length > 10000) {
                counter.style.color = 'red';
            } else {
                counter.style.color = '#666';
            }
        }
    });
    
    // // 思考过程切换功能
    // document.addEventListener('DOMContentLoaded', function() {
    //     const toggleBtn = document.getElementById('toggleReasoning');
    //     if (toggleBtn) {
    //         toggleBtn.addEventListener('click', () => {
    //             const content = document.getElementById('reasoningContent');
    //             const button = document.getElementById('toggleReasoning');
                
    //             if (content.classList.contains('show')) {
    //                 content.classList.remove('show');
    //                 button.textContent = '展开思考过程';
    //             } else {
    //                 content.classList.add('show');
    //                 button.textContent = '收起思考过程';
    //             }
    //         });
    //     }
    // });
    </script>
</body>
</html>